<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slice geojson by geojson-seg</title>
<style type="text/css">
    html,
    body {
        margin: 0px;
        height: 100%;
        width: 100%
    }

    .container {
        width: 100%;
        height: 100%;
        background: beige;
    }
</style>
<script type="text/javascript" src="https://unpkg.com/three@0.104.0/examples/js/libs/stats.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<!-- <script type="text/javascript" src="https://unpkg.com/@maptalks/gl/dist/maptalksgl.js"></script> -->
<script type="text/javascript" src="https://unpkg.com/three@0.138.0/build/three.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.three/dist/maptalks.three.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/geojsondataset/dist/geojsondataset.js"></script>

<body>

    <div id="map" class="container"></div>

    <script>
        var map = new maptalks.Map('map', {
            "center": [121.41030078111248, 31.241524815261272], "zoom": 13.745375881176956,
            "pitch": 65.80000000000004, "bearing": -0.13760818373077655,
            // baseLayer: new maptalks.TileLayer('base', {
            //     urlTemplate: "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
            //     subdomains: ['a', 'b', 'c', 'd'],
            //     attribution: '&copy; <a href="http://osm.org">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/">CARTO</a>'
            // })
        });
        const geoDataSet = new geojsondataset.GeoDataSet({ coordinateCount: 10000, loopFPS: 2 });
        const dataGroupId = 'dikuai';

        const material = new THREE.MeshBasicMaterial({ color: 'red' });
        let total = 0;
        geoDataSet.on(dataGroupId, (geojson) => {
            const mesh = threeLayer.toExtrudePolygons(geojson.features, { topColor: '#fff', asynchronous: true }, material);
            threeLayer.delayAddMesh(mesh);
            total += geojson.coordinateCount;
            console.log('coordiantes count:', total);

        })
        // the ThreeLayer to draw buildings
        var threeLayer = new maptalks.ThreeLayer('t', {
            identifyCountOnEvent: 1,
            // forceRenderOnMoving: true,
            // forceRenderOnRotating: true
        });
        var stats;

        threeLayer.prepareToDraw = function (gl, scene, camera) {
            stats = new Stats();
            stats.domElement.style.zIndex = 100;
            document.getElementById('map').appendChild(stats.domElement);
            var light = new THREE.DirectionalLight(0xffffff);
            light.position.set(0, -10, 10).normalize();
            scene.add(light);
            scene.add(new THREE.AmbientLight('#fff', 0.5));
            animate();
            setTimeout(() => {
                addPolygon();
            }, 100);

        };
        threeLayer.addTo(map);

        function animate() {
            requestAnimationFrame(animate);
            stats.update();
            threeLayer.loop();
            threeLayer._needsUpdate = !threeLayer._needsUpdate;
            if (threeLayer._needsUpdate && !threeLayer.isRendering()) {
                threeLayer.redraw();
            }

        }

        function addPolygon() {
            // data from https://github.com/antvis/L7/issues/580
            fetch('./data/old_zone_dissolve.json').then(res => res.json()).then(geojson => {
                geoDataSet.addGeoData(dataGroupId, geojson);
            })
        }


    </script>
</body>

</html>